<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>发布图片</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" href="/Public/Weixin/css/common.css">
</head>
<body>
<p>最多可添加9张作品</p>
<input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片"   style="display:block;" />
<div class="imglist"></div>
<input type="hidden" id="img_str" name="img_str">
<a id="upload_button" href="javascript:void(0);" class="uploadImage uploadbtn"><img src="/Public/Weixin/images/upload-add.png" alt=""></a>
<div class="sb">发布</div>
<input type="text" id="appId" value="{$signPackage["appId"]}">
<input type="text" id="timestamp" value="{$signPackage["timestamp"]}">
<input type="text" id="nonceStr" value="{$signPackage["nonceStr"]}">
<input type="text" id="signature" value="{$signPackage["signature"]}">
<button class="btn btn_primary" id="chooseImage">chooseImage</button>
<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
	var appId=$('#appId').val();
	var timestamp=$('#timestamp').val();
	var nonceStr=$('#nonceStr').val()
	var signature=$('#signature').val()
	wx.config({
		debug: true,
//		appId: '{$signPackage["appid"]}',
//		timestamp: '{$signPackage["timestamp"]}',
//		nonceStr: '{$signPackage["noncestr"]}',
//		signature: '{$signPackage["signature"]}',
		appId: 'wxbe0bcffb58932440',
		timestamp: timestamp,
		nonceStr:nonceStr,
		signature: signature,

		jsApiList: [
// 所有要调用的 API 都要加到这个列表中
			'chooseImage','previewImage','uploadImage','downloadImage'
		]
	});
	wx.ready(function () {
//		alert({$signPackage["noncestr"]})
// 5.3 上传图片
		$('.uploadImage').on('click', function () {
			wx.chooseImage({
				success: function (res) {
//					alert(res)
					var localIds = res.localIds;
					syncUpload(localIds);
				}
			});
		});
		var syncUpload = function(localIds){
			var localId = localIds.pop();
			wx.uploadImage({
				localId: localId,
				isShowProgressTips: 1,
				success: function (res) {
					var serverId = res.serverId; // 返回图片的服务器端ID
					var str = $('#img_str').val()+serverId+',';
					$('.imglist').append("<img src='"+localId+"' />");
					$('#img_str').val(str);
					//其他对serverId做处理的代码
					if(localIds.length > 0){
						syncUpload(localIds);
					}
					if($('.imglist img').size() >= 9) {
						$("#upload_button").hide();
					}
				},
				fail: function (res) { alert(JSON.stringify(res)); }
			});
		};
	});
</script>

<script>

	$(".sb").click(function(){
		var imglist = $(".imglist").html();

		if(imglist == "" || imglist == null) {
			alert("请添加图片");
			return false;
		} else {
			if($(".imglist").find('img').size() >9) {
				alert("图片只允许上传9张！");
				return false;
			}
			var img_str = $('#img_str').val();
		}

		$.post("{:U('Test/wxupload')}", {img_str:img_str},function(data){
			window.location.href = "__URL__/test";
		});
	});

</script>


</body>
</html>